<template>
  <div>
    <FilterTable
      ref="table"
      :fetchapi="fetchApi"
      :columns="columns"
      :params="fetchParams"
      :datakey="'rows'"
      :height="600"
      :isSelectColumn="false"
      :isColumnFilter="false"
      :isToperInfo="false"
      :onColumnsChange="columns => (this.columns = columns)"
    ></FilterTable>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { dictionary } from '@/utils/dictMixin';
import { getInfoHistory } from '@/api/customerRepair/customerCare/vehicleRemind';
import { getBrand, getSeries, getModel } from '@/api/customerRepair/customerCare/insuranceDueRemind/index';

export default {
  mixins: [dictionary],
  props: {
    vin: String,
    ownerNo: String
  },
  data() {
    this.BaseTable = null;
    let visitType = null;
    return {
      fetchApi: getInfoHistory,
      fetchParams: { xhrAbort: false, vin: this.vin, ownerNo: this.ownerNo, visitType: visitType },
      columns: this.createTableColumns()
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.queryBrand();
    this.querySeries();
    this.queryModel();
  },
  methods: {
    createTableColumns() {
      return [
        {
          title: '序号',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '销售顾问',
          dataIndex: 'ssgw',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          editType: 'select',
          editable: false,
          editItems: []
        },
        {
          title: '客户名称',
          dataIndex: 'khmc',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户电话',
          dataIndex: 'khyddh',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '联系人',
          dataIndex: 'lxrmc',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '联系人手机',
          dataIndex: 'lxryddh',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型',
          dataIndex: 'cxingmc',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户地址',
          dataIndex: 'khdz',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '建立日期',
          dataIndex: 'jlrq',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '方便联系时间',
          dataIndex: 'fblxsj',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '方便联系方式',
          dataIndex: 'fblxfs',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车牌号',
          dataIndex: 'pzh',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '回访单号',
          dataIndex: 'hfdh',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          editType: 'select',
          editable: false
        },
        {
          title: '联系人',
          dataIndex: 'lxrmc',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '成交日期',
          dataIndex: 'cjrq',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '建立日期',
          dataIndex: 'jlrq',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '活动日期',
          dataIndex: 'hdrq',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '活动标题',
          dataIndex: 'hdbt',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '方便联系时间',
          dataIndex: 'fblxsj',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '方便联系方式',
          dataIndex: 'fblxfs',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    // 查询所有品牌(供table使用)
    async queryBrand() {
      const res = await getBrand();
      this.columns.find(x => x.dataIndex === 'BRAND').editItems = res.data.map(x => ({ text: x.BRAND_NAME, value: x.BRAND_ID + '' }));
    },
    // 查询所有车系(供table使用)
    async querySeries() {
      const res = await getSeries();
      this.columns.find(x => x.dataIndex === 'SERIES').editItems = res.data.map(x => ({ text: x.SERIES_NAME, value: x.SERIES_ID + '' }));
    },
    // 查询所有车型(供table使用)
    async queryModel() {
      const res = await getModel();
      this.columns.find(x => x.dataIndex === 'MODEL').editItems = res.data.map(x => ({ text: x.MODEL_NAME, value: x.MODEL_ID + '' }));
    }
  }
};
</script>
